<!--
 * @Descripttion: 
 * @Author: liuYaoYu
 * @Date: 2021-11-29 13:00:42
 * @LastEditors: liuYaoYu
 * @LastEditTime: 2021-11-29 13:35:09
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      *,
      *:after,
      *:before {
        box-sizing: border-box;
      }
      body {
        background: #0f2a33;
      }
      .gallery {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        max-width: 1100px;
        justify-content: center;
        margin: 10px auto;
      }
      .gallery .item.flip-card {
        background-color: transparent;
        width: 228px;
        height: 228px;
        perspective: 1000px;
        margin: 0 6px 12px 6px;
        filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.2));
      }
      .gallery .item.flip-card:hover .flip-card-inner {
        transform: rotateY(180deg);
      }
      .gallery .item.flip-card .flip-card-inner {
        position: relative;
        width: 100%;
        height: 100%;
        text-align: center;
        transition: transform 0.8s;
        transform-style: preserve-3d;
      }
      .gallery .item.flip-card .flip-img,
      .gallery .item.flip-card .flip-text {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
      }
      .gallery .item.flip-card .flip-img {
        background-color: #fff;
        border: 1px solid #2f95a1;
        color: black;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2px;
      }
      .gallery .item.flip-card .flip-img .img-flex {
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
      }
      .gallery .item.flip-card .flip-text {
        background-color: #2f95a1;
        color: white;
        transform: rotateY(180deg);
        font-family: "Caramel", cursive;
        font-size: 32px;
        align-items: flex-end;
        justify-content: flex-end;
        padding: 10px 25px;
        z-index: 10;
      }
    </style>
  </head>
  <body>
    <div class="gallery"></div>
    <script>
      var box = document.getElementsByClassName("gallery")[0];
      var imgs = [{ src: "", name: "" }];
      var str = "";
      for (let i = 0; i < 12; i++) {
        str +=
          '<a class="item flip-card" target="_blank">' +
          '<div class="flip-card-inner">' +
          '<div class="flip-text">小书燕' +
          (i - -1) +
          "</div>" +
          '<div class="flip-img">' +
          "<div" +
          'class="img-flex"' +
          'style="' +
          "background-image: url("+ i +");" +
          '"' +
          ">"+ (i- -1) +"</div>" +
          "</div>" +
          "</div>" +
          "</a>";
      }
      box.innerHTML = str;
    </script>
  </body>
</html>
